﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="/Scripts/kinetic-v5.1.0.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui.js" type="text/javascript"></script>
    <link href="/Content/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/workflowdesigner.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/workflowdesigner.min.js" type="text/javascript"></script>
    <script src="/Scripts/ace.js" type="text/javascript"></script>

    <form action="" id="uploadform" method="post" enctype="multipart/form-data" onsubmit="tmp()">
        <table>
            <tr>
                <td></td>
                <td>
                    <a href='javascript:DownloadScheme()'>Download scheme workflow</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="file" name="uploadFile" id="uploadFile" style="width:350px">
                </td>
                <td>
                    <a href='javascript:UploadScheme()'>Upload  scheme workflow</a>
                </td>
            </tr>
        </table>
    </form>
    <table>
        <tr>
            <td>Size:</td>
            <td><input id="graphwidth" value="1200" /> x <input id="graphheight" value="600" /></td>
            <td><button onclick="wfdesignerRedraw();return false;">Resize</button></td>
            <td>
                |
            </td>
            <td><button onclick="OnNew();return false;">New</button></td>
            <td><button onclick="OnSave();return false;">Save</button></td>

        </tr>
    </table>
    <br />
    <div id="wfdesigner"></div>

    <script>
        var schemecode = 'SimpleWF';
        var wfdesigner = undefined;
        function wfdesignerRedraw() {
            var data;

            if (wfdesigner != undefined) {
                data = wfdesigner.data;
                wfdesigner.destroy();
            }

            wfdesigner = new WorkflowDesigner({
                name: 'simpledesigner',
                apiurl: 'WFEDesigner.ashx',
                renderTo: 'wfdesigner',
                imagefolder: '/images/',
                graphwidth: $('#graphwidth').val(),
                graphheight: $('#graphheight').val()
            });

            if (data == undefined) {
                var isreadonly = false;
                var p = { schemecode: schemecode, readonly: isreadonly };
                if (wfdesigner.exists(p))
                    wfdesigner.load(p);
                else
                    wfdesigner.create();
            }
            else {
                wfdesigner.data = data;
                wfdesigner.render();
            }
        }

        wfdesignerRedraw();

        function DownloadScheme() {
            wfdesigner.downloadscheme({ schemecode: schemecode });
        }
        function UploadScheme() {
            var file = $('#uploadFile');
            if (file == undefined || file.val().length == 0) {
                alert('You did not select a file to upload!');
                return false;
            }

            wfdesigner.uploadscheme($('#uploadform')[0], function () {
                alert('The file is uploaded!');
            });
        }

        function OnSave() {
            wfdesigner.schemecode = schemecode;

            var err = wfdesigner.validate();
            if (err != undefined && err.length > 0) {
                alert(err);
            }
            else {
                wfdesigner.save(function () {
                    alert('The scheme is saved!');
                });
            }
        }
        function OnNew() {
            wfdesigner.create();
        }
    </script>

</body>
</html>
